<template>
	<view class="page">
		<view class="listVue flex-between flex-wrap">
			<!-- 无数据显示 -->
			<view class="w100 flex-column align-center padding-column20 fixed-auto" v-if="isEmpty">
				<image src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/empty.png" style="width: 256rpx; height: 256rpx;"></image>
				<text style="color: #81868e;">暂无AI视频作品</text>
			</view>
			
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="videoVue relative" v-if="item.videoUrl">
					<u-icon name="more-dot-fill" size="32" color="#fff" @click.stop="toOpration(item.id, item.videoUrl)" class="menu absolute"></u-icon>
					<image :src="item.videoUrl+'?x-oss-process=video/snapshot,t_1,f_jpg,w_330,m_fast,ar_auto'" style="width: 330rpx;" mode="aspectFill"></image>
					<image src="../../static/play.png" style="width: 70rpx; height: 70rpx;z-index: 99;" class="absolute-auto" @click="$tools.router('../play', item.videoUrl)"></image>
					<view class="contrast flex-center align-center absolute" @click="toContrast(item.videoUrl, item.uploadVideoUrl)">
						<image src="../../static/contrast.png" style="width: 24rpx; height: 24rpx;"></image>
						<text style="color: #fff; font-size: 24rpx; padding-left: 10rpx;">对比效果</text>
					</view>
					<view class="share flex-center align-center absolute" @click="toContrast(item.videoUrl, item.uploadVideoUrl)">
						<image src="../../static/share.png" style="width: 24rpx; height: 24rpx;"></image>
						<text style="color: #fff; font-size: 24rpx; padding-left: 10rpx;">分享好友</text>
					</view>
				</view>
				<view class="videoVue relative" v-else style="background: rgba(0,0,0,0.1);">
					<u-icon name="more-dot-fill" size="32" color="#fff" @click.stop="toOpration(item.id, item.videoUrl)" class="menu absolute"></u-icon>
					<u-circle-progress active-color="#18AB4E" width="180" :percent="item.progress" bg-color="transparent" class="absolute-auto" style="z-index: 9;"></u-circle-progress>
					<text class="absolute-auto" style="color: #81868e;">{{ item.progress }}%</text>
				</view>
				<view style="line-height: 80rpx; text-align: center; color: #000; background: #fff;">{{item.name}}</view>
			</view>
		</view>
		<u-action-sheet :list="actions" v-model="show" @click="handleClick"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				list: [],
				isEmpty: true,
				pageNum: 0,
				pageSize: 8,
				isLastPage: false,
				oprationId: "",
				oprationUrl: "",
				isAuth: null,
				show: false,
				actions: [{text: "保存到相册"}, {text: "删除该视频"}, {text: "分享给好友"}]
			}
		},
		
		async onLoad() {
			await this.getList()
			this.canSave()
		},
		
		onReachBottom() {
			if(this.isLastPage) return
			this.pageNum ++
			this.getList()
		},
		
		methods: {
			toOpration(id, videoUrl){
				this.oprationId = id
				this.oprationUrl = videoUrl
				this.show = true
			},
			
			handleClick(e){
				console.log(e)
				switch(e){
					// 保存到相册
					case 0:
						this.keepFun()
					break;
					// 删除视频
					case 1:
						this.deleteFun()
					break;
					// 分享视频
					case 2:
						this.shareFun()
					break;
				}
			},
			
			toContrast(videoUrl, uploadVideoUrl){
				uni.navigateTo({
					url: `./contrast?videoUrl=${videoUrl}&&uploadVideoUrl=${uploadVideoUrl}`
				})
			},
			
			canSave(){
				let that = this
				uni.getSetting({
					success(res) {
						that.isAuth = res.authSetting['scope.writePhotosAlbum'];
						console.log("保存相册权限", that.isAuth)
					}
				});
			},
			
			authFun(){
				let that = this
				uni.authorize({
					scope: "scope.writePhotosAlbum",
					success() {
						uni.openSetting();
						that.canSave()
					}
				})
			},
			
			// 分享
			shareFun(){
				let that = this
				uni.downloadFile({
				    url: that.oprationUrl, // 视频地址
				    success(res) {
						console.log(res, "kkkk")
						wx.shareVideoMessage({
						    videoPath: res.tempFilePath,
						    success(res1) {
								console.log(res1)
							},
						    fail(err1){
								console.log(err1)
							}
						});
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			
			// 保存
			keepFun(){ 
				if(!this.isAuth) return this.authFun()
				let that = this
				uni.showLoading()
				uni.downloadFile({
					url: that.oprationUrl,
					success(res) {
						uni.hideLoading()
						console.log('download success', res);
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function () {
								that.$u.toast("保存成功")
								that.oprationId = ""
								console.log('save success');
							},
							fail(err){
								console.log(err)
								console.log('save fail');
							}
						});
					},
					fail(err){
						uni.hideLoading()
						console.log('download fail');
					}
				})
			},
			
			// 删除
			async deleteFun(){
				const res = await this.$request("/shuziren/userVideo", { id: this.oprationId }, "DELETE")
				if(res.code===200) {
					this.oprationId = ""
					this.$u.toast("删除成功")
					this.pageNum = 0
					this.list = []
					this.getList()
				}
			},
			
			// 获取用户AI作品
			async getList() {
				const res = await this.$request("/shuziren/userVideo/user", {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, "GET")
				if(res.code === 200) {
					this.list = this.list.concat(res.data.content)
					this.isEmpty = this.list.length===0
					this.isLastPage = res.data.page.number == res.data.page.totalPages - 1
					console.log("是否有下一页", this.isLastPage)
				}
				console.log("用户视频制作", this.userVideo)
			},
		}
	}
</script>

<style lang="less" scoped>
	.listVue {
		width: 750rpx;
		padding: 30rpx;
		.item {
			width: 330rpx;
			height: 600rpx;
			background: #f5f5f5;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
			.contrast {
				width: 160rpx;
				height: 46rpx;
				background: rgba(0, 0, 0, 0.5);
				bottom: 25rpx;
				right: 25rpx;
				z-index: 999;
				border-radius: 12rpx;
			}
			.menu {
				right: 25rpx;
				top: 25rpx;
			}
			.videoVue {
				width: 330rpx;
				height: 520rpx;
				border-radius: 12rpx 12rpx 0 0;
				overflow: hidden;
			}
		}
	}
</style>